<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>{$title}</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/main.css" crossorigin="anonymous">
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="site-wrapper container-md">
    <div class="cover-container">
        <div class="inner cover">
            <div class="inner cover">
                <hr>
                <p>
                    <img alt="Flyimg"
                         src="/upload/w_300/https://raw.githubusercontent.com/flyimg/graphic-assets/master/logo/raster/flyimg-logo-rgb.png">
                </p>
                <h2 id="hello-from-flyimg">Welcome to Flyimg</h2>

                <p>Experience the power of <strong>Flyimg</strong> - a powerful image processing service 
                    that transforms your high-resolution images into optimized, web-ready formats. 
                    <br />
                    Watch how we process the example car image below, reducing it from <strong>2266×1957 pixels (3.78MB)</strong> to perfectly optimized web formats.</p>

                <p>Simply call the source in your <code>&lt;img&gt;</code> tag like this:</p>

                <div class="d-flex align-items-center example-url">
                    <code id="example-url">
                        {$current_domain}/upload/w_800/https://flyimg.io/demo-images/Citroen-DS.jpg
                    </code>
                    <button id="copy-example-btn" type="button" class="d-flex ms-auto btn-clipboard" aria-label="Copy to clipboard" data-bs-original-title="Copy to clipboard">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
                            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path>
                            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path>
                        </svg>
                    </button>
                </div>
                <br />
                <p>
                    Our caching system stores the transformed image on the server, eliminating redundant processing for future requests. 
                </p>
                <p>
                    The default output format is the powerful <em>AVIF</em> format for superior compression and quality. You can also choose to generate images in <em>JPEG XL (JXL)</em>, <em>WebP</em>, <em>PNG</em>, or <em>JPEG</em> formats. For JPEG output, Flyimg uses <em>MozJPEG</em> compression for maximum quality and minimal file size. Note: JXL display depends on your browser support.
                </p>
                <h3 id="transformations">Advanced Image Transformations</h3>

                <p>Unlock the full potential of your images with our comprehensive suite of transformations: <strong>intelligent cropping</strong>,
                    <strong>face detection &#38; blur</strong>, <strong>dynamic resizing</strong>, <strong>quality optimization</strong>,
                    <strong>background manipulation</strong>, <strong>rotation</strong>, <strong>scaling</strong>, and many more professional-grade features.</p>
            </div>
            <hr>
            <h1>Try it now !</h1>
            <hr>
            <div class="row g-3">
                <div class="col">
                    <figure class="figure">
                        <img id="source-image" alt="Original Image" src="https://flyimg.io/demo-images/Citroen-DS.jpg"
                             class="img-fluid">
                        <hr/>
                        <p class="lead">
                            Source image
                        </p>
                        <figcaption class="figure-caption alert alert-success" id="source-image-caption"></figcaption>
                    </figure>
                </div>
                <div class="col">
                    <div id="loading-spinner" class="spinner-border text-info" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <div id="generated-image-div">
                        <figure class="figure">
                            <img src="https://raw.githubusercontent.com/flyimg/graphic-assets/master/logo/raster/flyimg-logo-rgb.png"
                                 alt="Dynamic Image" id="generated-image" class="img-fluid">
                            <hr/>
                            <p class="lead">
                                Generated image
                            </p>
                            <figcaption class="figure-caption alert alert-success"
                                        id="generated-image-caption"></figcaption>
                        </figure>

                    </div>
                </div>
            </div>
            <hr>
            <div class="row g-3">
                <div class="col-md" id="generated-url-container">
                    <div class="p-2 example-url">
                        <div class="row">
                            <div class="col-sm">
                                <div id="generated-url" class="align"></div>
                            </div>
                            <div class="col-sm-1">
                                <button id="copy-btn" type="button" class="d-flex ms-auto btn-clipboard"
                                        aria-label="Copy to clipboard"
                                        data-bs-original-title="Copy to clipboard">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                         class="bi bi-clipboard" viewBox="0 0 16 16">
                                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path>
                                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="source-image-input" class="form-label float-start">Enter the source image URL</label>
                    <div class="float-start" id="url-info" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="if your image's URL contains parameters, you need to URL encode the whole query string.">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-info-circle-fill" viewBox="0 0 16 16">
                            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                        </svg>
                    </div>

                    <input type="text" class="form-control" id="source-image-input" placeholder="Enter image URL"
                           value="https://flyimg.io/demo-images/Citroen-DS.jpg">
                    <div id="source-image-validation" class="invalid-feedback error-message">
                        Please enter a source image URL.
                    </div>
                </div>
                <div class="form-group">
                    <button class="btn btn-secondary" type="button" id="add-btn">
                        Add new Parameter
                    </button>
                    <div class="alert alert-danger" role="alert" id="error-options">
                        Please add at least one option.
                    </div>
                </div>
                <!-- Dynamic input fields will be added here -->
                <div id="dynamic-input-fields"></div>

                <button type="button" class="btn btn-dark mt-3" id="refresh-btn">
                    Generate image
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-crop" viewBox="0 0 16 16">
                        <path d="M3.5.5A.5.5 0 0 1 4 1v13h13a.5.5 0 0 1 0 1h-2v2a.5.5 0 0 1-1 0v-2H3.5a.5.5 0 0 1-.5-.5V4H1a.5.5 0 0 1 0-1h2V1a.5.5 0 0 1 .5-.5m2.5 3a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4H6.5a.5.5 0 0 1-.5-.5"/>
                    </svg>
                </button>
            </div>
            <hr/>
            <div class="text-center flyimg-promo">
                <h6 class="mb-2 flyimg-heading">Supercharge your images with <strong>Flyimg</strong></h6>
                <p class="mb-2 small flyimg-subtext">Real‑time image processing, caching, and modern codecs — optimized by default.</p>
                <div class="d-flex justify-content-center gap-2 mb-2">
                    <a class="btn btn-sm btn-info" href="https://docs.flyimg.io" target="_blank" rel="noopener">Read the Docs</a>
                    <a class="btn btn-sm btn-warning" href="https://github.com/flyimg/flyimg" target="_blank" rel="noopener">Star on GitHub</a>
                </div>
                <small class="d-block mb-2">
                    <span class="badge badge-brand-outline">version:<span id="version-number">{$version}</span></span>
                </small>
            </div>
            <hr />
        </div>

    </div>

</div>
<script src="/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>